<template>
  <a-card :loading="loading" :body-style="{ padding: '20px 24px 30px 28px' }" :bordered="false"
          :style="{'background-image': `url(${imageUrl})`,'background-repeat':'no-repeat','background-size':'100% 100%','border-radius':'15px'}">
    <a-row>
      <a-col :span="12" style="height:60px">
        <div class="chart-card-header">
          <div class="meta">
        <span style="margin-right: 10px;font-size: large">
          <a-icon style="font-size: larger" :type="iconType" />
        </span>
            <span class="chart-card-title">{{ title }}</span>
            <span class="chart-card-action">
          <slot name="action"></slot>
        </span>
          </div>
          <!--      <div class="total"><span>{{ total }}</span></div>-->
          <div class="total">
            <slot name="total"></slot>
          </div>
        </div>
      </a-col>
      <a-col :span="12" style="height:60px">
        <div style="color: #FFFFFF;font-size: 14px;line-height: 34px">
          <slot name="context"></slot>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
  export default {
    name: "NumberCard",
    props: {
      title: {
        type: String,
        default: ''
      },
      total: {
        type: String,
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      },
      imageUrl:{
        type: String,
        default:require('@/assets/background/yellow1.jpg')
      },
      iconType:{
        type: String,
        default: ''
      }
    },
  }
</script>

<style lang="less" scoped>
  .chart-card-header {
    position: relative;
    overflow: hidden;
    width: 100%;
    color: #FFFFFF;

    .meta {
      position: relative;
      overflow: hidden;
      width: 100%;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
      color: #FFFFFF;
    }
  }

  .chart-card-action {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    color: #FFFFFF;
  }

  .chart-card-footer {
    border-top: 1px solid #e8e8e8;
    padding-top: 9px;
    margin-top: 8px;
    color: #FFFFFF;

    > * {
      position: relative;
    }

    .field {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
  }

  .chart-card-content {
    margin-bottom: 12px;
    position: relative;
    height: 10px;
    width: 100%;
    color: #FFFFFF;

    .content-fix {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      color: #FFFFFF;
    }
  }

  .total {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: #000;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 38px;
    height: 38px;
    color: #FFFFFF;
  }
</style>